<template>
  <PageContainer>
    <view class="container">
      <Header title="消息管理" :is-box-shadow="false" />
      <Paglist
        v-model="dataList"
        :is-init-api="false"
        :parame="parame"
        @register="register"
        :is-show-loadmore="dataList.length > 1"
      >
        <template v-for="(item, index) in dataList" :key="index">
          <view class="bgf px-12 pt-12 br-8 mt-10 mx-15">
            <view @click="goDetails(item)">
              <view class="disFlxAC">
                <view class="inotified fz-10 flexShrink">{{ item.typeName }}</view>
                <view class="ov-1 fz-16" style="color: #333">{{ item.messageTitle }}</view>
              </view>
              <view class="borderBottom py-15">
                <view class="disFlxAC">
                  <text style="width: 140rpx">发送方式：</text>
                  <template
                    v-for="sendType in item.messageChannelList"
                    :key="sendType.messageChannel"
                  >
                    <text
                      class="ali-icon ml-10"
                      :class="sendType.messageChannel === SendTypeEnum.SMS ? 'fz-16' : 'fz-18'"
                    >
                      {{ sendType.messageChannel === SendTypeEnum.SMS ? '&#xe601;' : '&#xe602;' }}
                    </text>
                  </template>
                </view>
                <view class="disFlxJS pt-8">
                  <view class="disFlxAC">
                    <view class="flexShrink" style="width: 160rpx">发送人：</view>
                    <view class="ov-1">{{ item.sender }}</view>
                  </view>
                  <view class="fz-12 flexShrink">
                    {{ formatToDate(item.sendTime, 'YYYY-MM-DD HH:mm') }}
                  </view>
                </view>
              </view>
            </view>

            <view class="disFlxJS linh-44">
              <view class="fz-12">
                <text>发送结果：{{ item.sendSuccessNum + '/' + item.totalNum }}</text>
                <text class="ml-15">阅读数：{{ item.readNum }}</text>
              </view>
              <view @click="goSendResult(item)">
                <text>发送结果</text>
                <text class="ali-icon fz-15">&#xe6c7;</text>
              </view>
            </view>
          </view>
        </template>
      </Paglist>

      <TButtonGroup position="fixed" :styles="{ backgroundColor: '#FFF' }">
        <TButton type="primary" text="+新建消息" class="gutter-btn" @click="goAddMessage" />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /* messageManagement 消息管理  */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import Paglist from '@/components/Paglist/index.vue';
  import { useConList } from '@/components/Paglist/useConList';
  import { ref, reactive, provide } from 'vue';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { navigateTo, onLoad } from '@/router';
  import { getMsgSendList } from '@/api/admin';
  import type { MessageDetailData } from '@/api/admin/types';
  import { onPageScroll, onShow } from '@dcloudio/uni-app';
  import { SendTypeEnum } from '@/enums/admin';
  import { formatToDate } from '@/utils/dateUtil';
  import { useAdminStoreWithOut } from '@/store/modules/admin';

  const useAdmin = useAdminStoreWithOut();
  const [register, { refresh }] = useConList();

  provide('api', (obj: any) => {
    return getMsgSendList(obj);
  });
  const parame = reactive({});
  const dataList = ref<MessageDetailData[]>([]);

  onLoad(() => {
    refresh && refresh();
  });
  onShow(() => {
    console.log(useAdmin);

    if (useAdmin.isResetList) {
      refresh && refresh();
      useAdmin.setIsResetList(false);
    }
  });

  const goAddMessage = () => {
    navigateTo({ name: 'addMessage' });
  };

  const goSendResult = (item: MessageDetailData) => {
    useAdmin.setMsgDetails(item);
    navigateTo({ name: 'messageSendResult', options: { unionMsgId: item.unionMsgId } });
  };
  const goDetails = (item: MessageDetailData) => {
    useAdmin.setMsgDetails(item);
    navigateTo({ name: 'messageDetails' });
  };

  onPageScroll(() => {})
</script>

<style lang="scss" scoped>
  .container {
    font-size: 28rpx;
    color: #aaabab;
    .flexShrink {
      flex-shrink: 0;
    }
    .inotified {
      background-color: #2878ff;
      color: #fff;
      margin-right: 6rpx;
      border-radius: 4rpx;
      padding: 0 6rpx;
    }
  }
</style>
